<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 顶部搜索框模块 -->
            <div class="form-group">
              <div class="input-group">
                <h4>新增员工</h4>
                <button type="button" class="btn btn-danger btn-xs" @click="add">新增</button>
              </div>
            </div>
      
            <!-- 数据表格 -->
            <table class="table table-bordered table-hover mt-2">
              <thead>
                <tr>
                  <th>用户名</th>
                  <th>职位</th>
                  <th>邮箱</th>
                  <th>联系方式</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in list" :key="item.employeeId">
                    <td>{{ item.empName }}</td>
                    <td>{{ item.position }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.phoneNumber }}</td>
                    <td>
                      <button type="button" class="btn btn-primary btn-xs" @click="edit(item)">修改</button>
                      <button type="button" class="btn btn-danger btn-xs" @click="remove(item)">删除</button>
                    </td>
                </tr>
              </tbody>
            </table>
            <div class="row" v-if="showV">
              <form>
                <div class="form-group" v-if="showEmpId">
                  <label for="exampleInputName1">用户编号</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputName1"
                    placeholder="请输入用户名"
                    v-model="editList.employeeId"
                    disabled
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputLoginName">登录名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputLoginName"
                    placeholder="请输入用户名"
                    v-model="editList.loginName"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputName">用户名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputName"
                    placeholder="请输入用户名"
                    v-model="editList.empName"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword">密码</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputPassword"
                    placeholder="请输入用户名"
                    v-model="editList.password"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputPosition">职位</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputPosition"
                    placeholder="请输入职位"
                    v-model="editList.position"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputPhoneNumber">联系方式</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputPhoneNumber"
                    placeholder="请输入联系方式"
                    v-model="editList.phoneNumber"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail">邮箱</label>
                  <input
                    type="email"
                    class="form-control"
                    id="exampleInputEmail"
                    placeholder="请输入邮箱"
                    v-model="editList.email"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputSalary">工资</label>
                  <input
                    type="text"
                    class="form-control"
                    id="exampleInputSalary"
                    placeholder="请输入工资"
                    v-model="editList.salary"
                  />
                </div>
                <button type="button" class="btn btn-info" @click="submit">提交</button>
              </form>
            </div>
          </div>
    </div>
</body>
</html>
<script>
var htttp = axios.create({
  baseURL:'http://localhost:18081',
  timeout: 3000,
})
new Vue({
  el: '#app',
  data: {
    list: [],
    showV: false,
    showEmpId: false,
    editList: [],
    pageNum:1
  },
  methods: {
    // 获取员工列表
    getEmpList() {
      axios.get('http://localhost:18081/employees/selectAllByEmpNameAndPhoneNumber',{
        params:{
          pageNum: this.pageNum,
          empName: '',
          phoneNumber: ''
        }
      })
        .then(data => {
          console.log(data);
          if (!data.data.status) {
            alert(data.data.message);
          } else {
            this.list = data.data.data.list;
          }
        })
        .catch(error => {
          console.error('Error fetching employee list:', error);
        });
    },
    // 展示新增员工
    add() {
     this.showV = true;
     this.showEmpId = false;
     this.editList = {};  // 确保这是一个对象
   },
    // 展示编辑员工
    edit(item) {
      this.showV = true;
      this.showEmpId = true;
      axios.get(`http://localhost:18081/employees/selectAllByEmployeeId`,{
        params:{
          employeeId: item.employeeId
        }
      })
        .then(data => {
          console.log(data);
          this.editList = data.data.data;
        })
        .catch(error => {
          console.error('Error fetching employee details:', error);
        });
    },
    // 删除员工
    remove(item) {
      if (confirm(`确定要删除员工 ${item.empName} 吗？`)) {
        axios.delete(`http://localhost:18081/employees/delete/${item.employeeId}`)
          .then(data => {
            console.log(data);
            if (!data.data.status) {
              alert(data.data.message);
            } else {
              this.getEmpList();
            }
          })
          .catch(error => {
            console.error('Error deleting employee:', error);
          });
      }
    },
    // 提交员工信息
    submit() {
     console.log(this.showEmpId);
     console.log(this.editList);
     if (this.showEmpId) {
       // 修改员工
       axios.post(`http://localhost:18081/employees/updateEmployee`, this.editList)
         .then(data => {
           console.log(data);
           if (!data.data.status) {
             alert(data.data.message);
           } else {
             this.showV = false;
             this.getEmpList();
           }
         })
         .catch(error => {
           console.error('Error updating employee:', error);
         });
     } else {
       // 新增员工
       axios.post('http://localhost:18081/employees/insertInto', this.editList)
         .then(data => {
           console.log(data);
           if (!data.data.status) {
             alert(data.data.message);
           } else {
             this.showV = false;
             this.getEmpList();
           }
         })
         .catch(error => {
           console.error('Error adding employee:', error);
         });
     }
   }
   
  },
  created() {
    this.getEmpList();
  }
});

</script>